<html>

<head>
    <title></title>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            $('p:eq(0)').click(function () {
                //alert(123);
                $('#dv_show').html('单击事件出发！');
            });
            $('p:eq(1)').dblclick(function () {
                //alert(123);
                $('#dv_show').html('双击击事件出发！');
            });
            $('p:eq(2)').mouseenter(function () {
                $('#dv_show').html('鼠标进入事件触发！');
            });
            $('p:eq(2)').mouseleave(function () {
                $('#dv_show').html('鼠标离开事件触发！');
            });
            $('p:eq(3)').mousedown(function () {
                $('#dv_show').html('鼠标按下事件触发！');
            });
            $('p:eq(3)').mouseup(function () {
                $('#dv_show').html('鼠标松开事件触发！');
            });
            $('p:eq(4)').hover(
                function () {
                    $('#dv_show').html('鼠标悬事件触发！');
                },
                function () {
                    $('#dv_show').html('鼠标停事件触发！');
                }
            );
            $('input[type=text]').focus(function () {
                $(this).css('background-color', 'gray');
            });
            $('input[type=text]').blur(function () {
                $(this).css('background-color', 'white');
            });
        });
    </script>
    <style>
        .dv_show {
            background-color: pink;
            color: red;
        }
    </style>
</head>
<div>
    <div id='dv_show' class="dv_show"></div>
    <p>测试单击事件</p>
    <p>测试双击事件</p>
    <p>测试鼠标进入和离开事件</p>
    <p>测试鼠标按下和松开事件</p>
    <p>测试光标悬停事件</p>
    <input type="text" value="" /> <br>
    <input type="text" value="" /> <br>
</div>


</html>